<template>
  <div class="w-[1100px] h-[1200px] p-20 relative flex flex-col">
    <div class="flex-1">
      <div class="flex justify-between items-center pl-[33%]">
        <div class="text-center font-semibold text-4xl flex-1">{{ printObj.hisname }}</div>
      </div>
      <div class="flex justify-between items-center px-20 mt-8">
        <div class="flex justify-center items-center" style="border: 2px solid #000">丨丨丨丨条形码丨丨丨丨丨</div>
        <div>
          <div>打印： {{ printObj.dysj }}</div>
          <div class="flex items-end mt-5">
            编号：
            <div class="w-40">{{ printObj.jzbh }}</div>
          </div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="flex-1 text-lg">姓名： {{ printObj.brName }}</div>
        <div class="flex-1 text-lg">{{ printObj.brXb }}</div>

        <div class="flex-1 text-lg">{{ printObj.brAge }} 岁</div>
        <div class="flex-1 text-lg">{{ printObj.brMob }}</div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="pr-2 flex items-center">
          费别：<input type="checkbox" :checked="printObj.yblb == '医保'" class="mr-2" />医保
          <input class="mx-2" type="checkbox" :checked="printObj.yblb == '自费'" />非医保
        </div>
        <div class="flex items-end">
          医保/就诊卡号：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.brBlkh }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="pr-2 flex items-center">
          门诊号：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.brBlkh }}</div>
        </div>
        <div class="flex items-end">
          科别/病区-床位号：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.ksmc }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="flex items-end">
          临床诊断：
          <div class="w-40" style="border-bottom: 1px solid #000">/</div>
        </div>
        <div class="flex items-end">
          开具日期：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.yzsj }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="flex items-end w-full">
          中医诊断：
          <div class="flex-1" style="border-bottom: 1px solid #000">{{ printObj.zyzd }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="flex items-end w-full">
          中医证名：
          <div class="flex-1" style="border-bottom: 1px solid #000">{{ printObj.zyzx }}</div>
        </div>
      </div>
      <div class="text-2xl font-bold px-20 mt-2">Rp</div>
      <div class="flex flex-wrap px-20">
        <div v-for="item in printData.printData?.detail" :key="item" class="flex justify-between items-center pr-2 mt-4 w-[30%]">
          <div>{{ item.mc }}</div>
          <div>{{ item.sl }} {{ item.dw }}</div>
        </div>
      </div>
      <div class="flex">
        <div class="text-lg font-bold px-20 mt-2">以下空白</div>
        <div class="text-lg font-bold px-20 mt-2">{{ printObj.fssl }}</div>
        <div class="text-lg font-bold px-20 mt-2"></div>
      </div>
      <div class="flex">
        <div class="text-lg font-bold px-20 mt-2">{{ printObj.jzfs }} {{ printObj.zyzd }}</div>
        <div class="text-lg font-bold px-20 mt-2">{{ printObj.yfmc }}</div>
        <div class="text-lg font-bold px-20 mt-2">{{ printObj.pl }}</div>
        <div class="text-lg font-bold px-20 mt-2">{{ printObj.yf }}</div>
      </div>
    </div>
    <div class="w-full px-20">
      <div class="flex justify-between items-center mt-4">
        <div class="flex items-end">
          单剂重量：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.djzl }} 克</div>
        </div>
        <div class="flex items-end">
          总剂重量：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.zjzl }} 克</div>
        </div>
        <div class="flex items-end flex-1"></div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="flex items-end">
          审核：
          <div class="w-40" style="border-bottom: 1px solid #000"></div>
        </div>
        <div class="flex items-end">
          调配：
          <div class="w-40" style="border-bottom: 1px solid #000"></div>
        </div>
        <div class="flex items-end flex-1">
          医师：
          <div class="flex-1" style="border-bottom: 1px solid #000">{{ printObj.ysmc }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="flex items-end">
          核对：
          <div class="w-40" style="border-bottom: 1px solid #000"></div>
        </div>
        <div class="flex items-end">
          发药：
          <div class="w-40" style="border-bottom: 1px solid #000"></div>
        </div>
        <div class="flex items-end flex-1">
          金额（元）：
          <div class="flex-1" style="border-bottom: 1px solid #000">￥{{ printObj.hjje }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'

const printObj = ref({})

const props = defineProps({
  printData: {
    type: Array,
    default: () => []
  }
})
watch(
  () => props.printData,
  () => {
    if (props.printData.printData?.detail[0]) {
      printObj.value = props.printData.printData?.detail[0]
    } else {
      printObj.value = {}
    }
  }
)
</script>
<style lang="less" scoped></style>
